<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>已完成的事情</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mitt@2.1.0/dist/mitt.umd.js"></script>
  <link rel="stylesheet" href="./03.css">
  <style>
    .list-move,
    .list-enter-active,
    .list-leave-active {
      transition: all 0.5s ease;
    }

    .list-enter-from,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .list-leave-active {
      position: absolute;
    }
    #app{
    width: 20rem;
    background-color: bisque;
    padding: auto;
    margin: auto;
}
/* 按钮样式 */
button{
    border-radius: 45%;
}
/* 添加按钮 */
.btn{
background-color: yellow;
}
/* 完成按钮 */
.btn1{
    background-color: red;
    color: aliceblue;
}
/* 删除按钮 */
.btn2{
    background-color: green;
    color: aliceblue;
}
input{
    height: 1.5rem;
    border-radius: 20%;

}
  </style>
</head>

<body>
  <div id="app">
    <!--添加新代办  -->
    <input type="text" v-model="things"><button @click="addThings" class="btn">+</button>
    <my-component :incomplete="listThings"></my-component>
    <my-componenttwo></my-componenttwo>
  </div>

  <template id="child-template">
    <!-- 未完成 -->
    <h2>待定列表</h2>

    <transition-group name="list" tag="ul">
       <!-- 完成按钮 -->
      <li v-for="(item,index) in incomplete" :key="item">{{item}} <button
          @click="haveCompletedThings(item)" class="btn1">√</button></li>
    </transition-group>

  </template>
  <template id="child-templateTwo">
     <!-- 已完成列表 -->
    <h2>已完成列表</h2>
    <transition-group name="list" tag="ul">
        <!-- 删除按钮 -->
      <li v-for="(item,index) in haveCompleted">{{item}}<button @click="delIncomplete(index)" class="btn2">×</button></li>
    </transition-group>
  </template>
  <script>
    const emitter = window.mitt()
    const { ref, reactive, provide, inject } = Vue
    const app = Vue.createApp({
      setup (props) {
        const things = ref("")
        const listThings = ref([])
        const addThings = () => {
          listThings.value.push(things.value)
        }
        return { things, addThings, listThings }
      }
    })
    app.component('my-component', {
      template: "#child-template",
      props: {
        incomplete: {
          type: Array,
          default: []
        }
      },
      setup () {
        const haveCompletedThings = (item) => {
          emitter.emit('busEmit', item)
        }
        return { haveCompletedThings }
      }
    })
    app.component('my-componenttwo', {
      template: "#child-templateTwo",
      setup () {
        const haveCompleted = ref([])
        emitter.on('busEmit', (v) => {
          haveCompleted.value.push(v)
        })
        const delIncomplete = (index) => {
          haveCompleted.value.splice(index, 1)
        }

        return { haveCompleted, delIncomplete }
      }
    })
    app.mount('#app')

  </script>

</body>

</html>